<template>
  <div class="search-tag">
    <div class="search-brief">
      <p style="font-size: 14px;margin-bottom: 2px">{{subject.title}}&nbsp;{{subject.subtitle}}</p>
    </div>
    <div style="display: inline-block;vertical-align: top">
      <i class="el-icon-edit"  @click="dialogVisible = true"/>
      <i class="el-icon-delete"  @click="deleteMovie(subject)"/>
    </div>
    <el-dialog
      title="修改电影"
      style="width: 1000px;margin: 0 auto"
      :visible.sync="dialogVisible"
      :before-close="handleClose">
      <el-form ref="editForm" rules="rules" label-width="100px">
        <el-form-item label="电影名：" style="margin-bottom: 10px;width: 400px">
          <el-input v-model="subject.title"></el-input>
        </el-form-item>
        <el-form-item label="子标题：" style="margin-bottom: 10px;width: 400px">
          <el-input v-model="subject.subtitle"></el-input>
        </el-form-item>
        <el-form-item label="导演：" style="margin-bottom: 10px;width: 400px">
          <el-input type="textarea" v-model="subject.director"></el-input>
        </el-form-item>
        <el-form-item label="演员：" style="margin-bottom: 10px;width: 400px">
          <el-input type="textarea" v-model="subject.stars"></el-input>
        </el-form-item>
        <el-form-item label="上映年份：" style="margin-bottom: 10px;width: 400px">
          <el-input-number v-model="subject.year"></el-input-number>
        </el-form-item>
        <el-form-item label="电影简介：" style="margin-bottom: 10px;width: 400px">
          <el-input type="textarea" v-model="subject.introduce"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitEditForm('editForm')">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default{
  props: {
    subject: {
      type: Object
    },
    mid: 0
  },
  data () {
    return {
      dialogVisible: false,
      rules: {}
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    submitEditForm (formName) {
      // this.$refs[formName].validate(valid => {
      let valid = true
      if (valid) {
        console.log('validate is ok')
        this.$store.commit('IMOVIE', {imovie: this.subject})
        this.$store.dispatch('editMovie')
      } else {
        console.log('error submit')
        return false
      }
      // })
    },
    deleteMovie (subject) {
      this.$store.commit('MID', {mid: this.subject.id})
      this.$store.dispatch('deleteMovie')
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less">
@import '../../../style/color.less';
@import "../../../style/base";
.search-tag{
  padding: 20px;
  border-top: 1px dashed @line;
  width: 700px;
  margin: 0 auto;
  .search-img{
    width: 128px;
    height: 180px;
    overflow: hidden;
    display: inline-block;
    .search-tag-img{
      width: 100px;
    }
  }
  .search-brief{
    display: inline-block;
    vertical-align: top;
    margin-left: 40px;
    width: 400px;
    p{
      margin-bottom: 20px;
    }
    .title{
      color: #666699;
      font-size: 14px;
      span{
        font-size: 14px;
      }
    }
    .disc{
      width: 400px;
      .introduce-class{
        word-break: break-all;
        overflow:hidden; // 超出的文本隐藏
        text-overflow:ellipsis;
        display:-webkit-box; // 将对象作为弹性伸缩盒子模型显示。
        -webkit-box-orient:vertical;  //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
        -webkit-line-clamp:2; // 结合上面两个属性，表示显示的行数。
      }
    }
    .rate{
      .el-rate{
        display: inline-block;
        .el-rate__icon{
          font-size: 14px;
        }
      }
      .rate-value{
        color: #ff9900
      }
    }
  }
  .function-class{
    display: inline-block;
  }
}
</style>
